<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>设置</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/modern-unified.css" rel="stylesheet" />
	</head>

	<body>
		<!-- 现代化头部 -->
		<div class="modern-header" style="box-shadow:0 2px 12px 0 rgba(46,204,113,0.06);background:rgba(255,255,255,0.98);height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:20;">
			<button class="modern-back-btn" onclick="mui.back()" style="background:none;border:none;padding:0 18px 0 12px;display:flex;align-items:center;font-size:22px;color:#34495E;">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="modern-header-title" style="flex:1;text-align:center;font-size:20px;font-weight:600;color:#222;margin:0;letter-spacing:1px;">设置</h1>
			<div style="width:40px;"></div>
		</div>
		<div class="modern-container" style="margin-top:18px;">
			<!-- 设置选项 -->
			<div class="modern-list">
				<div class="modern-list-item" id="changeIp">
					<div class="modern-icon">
						🌐
					</div>
					<div class="modern-list-content">
						<div class="modern-list-title">修改服务地址</div>
						<div class="modern-list-subtitle">配置服务器连接地址</div>
					</div>
					<div style="color: #95A5A6;">→</div>
				</div>
				
				<div class="modern-list-item" id="changePw">
					<div class="modern-icon">
						🔒
					</div>
					<div class="modern-list-content">
						<div class="modern-list-title">修改密码</div>
						<div class="modern-list-subtitle">更改账户登录密码</div>
					</div>
					<div style="color: #95A5A6;">→</div>
				</div>
				
				<div class="modern-list-item" id="clear">
					<div class="modern-icon">
						🗑️
					</div>
					<div class="modern-list-content">
						<div class="modern-list-title">清除缓存</div>
						<div class="modern-list-subtitle">清理本地存储数据</div>
					</div>
					<div style="color: #95A5A6;">→</div>
				</div>
			</div>

			<!-- 退出登录按钮 -->
			<div style="margin-top: 40px;">
				<button type="button" class="modern-btn" id="logout" style="background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);">
					退出登录
				</button>
			</div>
		</div>

		<script src="../js/mui.js"></script>
		<script src="../js/request.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui("body").on("tap", "#logout", function(event) {
				request.post('/logout', null, (data) => {
					//提交成功回调
					console.log('调用服务端退出登录成功');
					mui.toast("退出成功");
				}, (error, thrown) => {
					//发生错误时，回调
					console.error('调用服务端退出登录失败', error);
				})
				var curr = plus.webview.currentWebview();
				var wvs = plus.webview.all();
				for (var i = 0, len = wvs.length; i < len; i++) {
					//关闭除setting页面外的其他页面
					if (wvs[i].getURL() == curr.getURL())
						continue;
					plus.webview.close(wvs[i]);
				}
				//打开login页面后再关闭setting页面
				plus.webview.open('login.html');
				localStorage.setItem("isLogin", false);
				localStorage.setItem("token", "");
				localStorage.setItem("userobj","{}")
				localStorage.setItem("userId", "");
				plus.webview.currentWebview().close()
			})

			mui("body").on("tap", "#clear", function(event) {
				localStorage.setItem("first", "1");
				localStorage.setItem("token", "");
				mui.toast("清除成功");
				var curr = plus.webview.currentWebview();
				var wvs = plus.webview.all();
				for (var i = 0, len = wvs.length; i < len; i++) {
					//关闭除setting页面外的其他页面
					if (wvs[i].getURL() == curr.getURL())
						continue;
					plus.webview.close(wvs[i]);
				}
				//打开login页面后再关闭setting页面
				plus.webview.open('startView.html');
				plus.webview.currentWebview().close();
			})

			mui("body").on("tap", "#changePw", function(event) {
				mui.openWindow({
					url: 'changePw.html',
					id: 'changePw.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})
			
			mui("body").on("tap", "#changeIp", function(event) {
				mui.openWindow({
					url: 'ipconfig.html',
					id: 'ipconfig.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})
		</script>
	</body>

</html>